import React, { useRef, useState, useEffect } from 'react'
import "./Workbench.css"
import { Image, Radio, Col, Row } from 'antd';
import {
  EditOutlined,
  QuestionCircleFilled
} from '@ant-design/icons';
import radio1 from "../../icon/单选1.png"
import radio2 from "../../icon/单选2.png"
import radio3 from "../../icon/单选3.png"
import sign4 from "../../icon/标识4.png"
import in1 from "../../icon/in1.png"
import in2 from "../../icon/in2.png"
import in3 from "../../icon/in3.png"
import in4 from "../../icon/in4.png"
import in5 from "../../icon/in5.png"
import in6 from "../../icon/in6.png"
import in7 from "../../icon/in7.png"
import in8 from "../../icon/in8.png"
import info1 from "../../icon/info1.png"
import info2 from "../../icon/info2.png"
import info3 from "../../icon/info3.png"
import info4 from "../../icon/info4.png"
import info5 from "../../icon/info5.png"
import info6 from "../../icon/info6.png"
import info7 from "../../icon/info7.png"
import maoJson from "../../map.json"
import * as echarts from 'echarts';


export default function Workbench_ex() {
  const barRef5 = useRef()
  const [barChart5, setBarChart5] = useState(null)
  const mapRef = useRef()
  const [mapChart, setMapChart] = useState(null)

  var cityData = [{ name: '闽清县', value: 96.55, }, { name: '闽侯县', value: 86.51, }, { name: '永泰县', value: 0, }, { name: '福清市', value: 92.86, },
  { name: '平潭县', value: 84.98, }, { name: '长乐区', value: 91.24, }, { name: '马尾区', value: 0, }, { name: '晋安区', value: 0, },
  { name: '鼓楼区', value: 0, }, { name: '台江区', value: 0, }, { name: '仓山区', value: 91.71, }, { name: '连江县', value: 92.48, }, { name: '罗源县', value: 100, }
  ]

  const fzMap = () => {
    var myChart
    if (!mapChart) {
      myChart = echarts.init(mapRef.current);
      setMapChart(myChart)
    } else {
      myChart = mapChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });
    var name = 'jiangxi' //地图名是jiangxi
    var data = maoJson  //地图的数据来自之前引入的json文件
    echarts.registerMap(name, data)

    myChart.setOption({
      backgroundColor: '#fff',
      visualMap: {
        show: true,
        //设置最大值和最小值
        type: "piecewise",
        min: 0,
        max: 100,
        pieces: [
          { min: 90 },
          { min: 80, max: 90 },
          { min: 70, max: 80 },
          { min: 0, max: 70 },
        ],
        orient: "horizontal",
        formatter: function (value, value2) {
          if (value === 90) {
            return ">" + value + "% " // 范围标签显示内容。
          } else if (value === 80) {
            return value + "% - 90% " // 范围标签显示内容。
          } else if (value === 70) {
            return value + "% - 80% " // 范围标签显示内容。
          } else {
            return value + " - 70% " // 范围标签显示内容。
          }

        },
        itemWidth: "12px",
        itemHeight: "12px",
        left: "10%",
        textStyle: {
          opacity: 0.6,
          fontSize: 12
        },
        calculable: true,
        seriesIndex: [0], //作用在哪个series上
        inRange: {
          color: ['#c2cce3', '#b1ccdf', '#cee9f3', '#addee3'],

        }
      },
      tooltip: {
        show: true,
        valueFormatter: (value) => value + "%"
      },
      series: [
        {
          name: "物联体系建设应用率",
          type: 'map',
          map: name,
          roam: true,
          geoIndex: 1,
          zoom: 2,  //地图的比例
          data: cityData,
          aspectScale: "1",
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#000000'  //字体颜色
              },
              formatter: function (params) {
                return [`{a|${params.name}}\n{b|${params.value}%}`]
              },
              rich: {
                a: {
                  color: '#000000',
                  lineHeight: 20
                },
                b: {
                  color: '#1FBBA9',
                  fontSize: 13,
                  fontWeight: "bold",
                },
              },
            },
          },

          itemStyle: {
            normal: {
              areaColor: '#EEEEEE',
              borderColor: 'white',
            },
            emphasis: {
              areaColor: '#fad3bd',
            }
          },
        },
      ]
    });
  }

  const bar5 = () => {
    var myChart
    if (!barChart5) {
      myChart = echarts.init(barRef5.current);
      setBarChart5(myChart)
    } else {
      myChart = barChart5
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },

      },
      grid: {
        right: '5%',
        bottom: '20%',
        top: "10%",
        left: "15%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          color: "#8b8b8b",
          fontSize: 10
        },
        axisTick: { show: false },
      },
      yAxis: {
        max: 100,
        min: 0,
        interval: 25,
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          formatter: "{value} %",
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'//虚线
          },
          show: true //隐藏
        }
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: 'bar',
          data: [10, 20, 30, 40, 50, 60, 70],
          barWidth: "20px",

          itemStyle: {
            borderRadius: [3, 3, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#188df0' },

              { offset: 0.7, color: '#7856f3' }
            ])
          },
        }]
    })
  }
  useEffect(() => {
    setTimeout(function () {
      fzMap()
      bar5()
    }, 500)
  }, [])


  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: "1 1 900px", borderRadius: "8px" }}>
        <div style={{ height: '565px', display: 'flex' }}>
          <div style={{ flex: '1 1 100px' }}>
            <div style={{ background: 'white', height: "275px", borderRadius: "8px" }}>
              <div style={{ padding: "12px 15px", }}>
                <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>综合指标概览</span>
              </div>
              <hr style={{ opacity: "0.4" }}></hr>
              <div style={{ padding: '10px 15px', display: 'flex' }}>
                <div style={{ width: "120px", height: '100px', padding: "0 10px" }}>
                  <Image preview={false} src={sign4}></Image>
                </div>
                <div style={{ flex: "1 1 300px", margin: "0 0 0 20px", height: '90px', lineHeight: "30px" }}>
                  <div style={{ fontWeight: 'bold' }}>物联体系建设的应用率</div><hr style={{ opacity: "0.4" }}></hr>
                  <div style={{ display: "flex" }}>
                    <div style={{ width: "150px", fontSize: '12px' }}>指标状态</div>
                    <div style={{ flex: '1 1 260px', fontSize: '12px', color: '#1FBBA9' }}>优秀</div>
                  </div><hr style={{ opacity: "0.4" }}></hr>
                  <div style={{ display: "flex" }}>
                    <div style={{ width: "150px", fontSize: '12px' }}>更新时间</div>
                    <div style={{ flex: '1 1 260px', fontSize: '12px' }}>2023-06-19 09:00:00</div>
                  </div><hr style={{ opacity: "0.4" }}></hr>
                </div>
              </div>
              <div style={{ display: 'flex', padding: '0 15px' }}>
                <div style={{ width: '50%', fontWeight: 'bold' }}>
                  设备接入情况
                </div>
                <div style={{ width: '50%', fontSize: '12px', textAlign: "right", opacity: "0.7" }}>
                  本月新增:<span style={{ color: "#1FBBA9", fontSize: "18px", fontWeight: "bold" }}> 0 </span>台
                </div>
              </div>
              <div style={{ display: "flex", padding: '10px 15px' }}>
                <div style={{ flex: '1 1 100px', height: '60px', border: "1px solid #c9cacac7", padding: '5px 10px 10px 10px', borderRadius: '3px' }}>
                  <div style={{ opacity: "0.7", fontSize: '12px' }}><Image preview={false} src={radio1} style={{ width: "10px", height: "10px" }}></Image> 建设中</div>
                  <div style={{ fontSize: '12px', textAlign: 'center' }}><span style={{ fontSize: "18px", fontWeight: 'bold' }}>10980 </span>台</div>
                </div>
                <div style={{ flex: '1 1 100px', height: '60px', border: "1px solid #c9cacac7", padding: '5px 10px 10px 10px', borderRadius: '3px', margin: "0 0 0 10px" }}>
                  <div style={{ opacity: "0.7", fontSize: '12px' }}><Image preview={false} src={radio2} style={{ width: "10px", height: "10px" }}></Image> 投运中</div>
                  <div style={{ fontSize: '12px', textAlign: 'center' }}><span style={{ fontSize: "18px", fontWeight: 'bold' }}>7656 </span>台</div>
                </div>
                <div style={{ flex: '1 1 100px', height: '60px', border: "1px solid #c9cacac7", padding: '5px 10px 10px 10px', borderRadius: '3px', margin: "0 0 0 10px" }}>
                  <div style={{ opacity: "0.7", fontSize: '12px' }}><Image preview={false} src={radio3} style={{ width: "10px", height: "10px" }}></Image> 检修中</div>
                  <div style={{ fontSize: '12px', textAlign: 'center' }}><span style={{ fontSize: "18px", fontWeight: 'bold' }}>0 </span>台</div>
                </div>
              </div>
            </div>
            <div style={{ background: 'white', height: "275px", margin: "15px 0 0 0", borderRadius: "8px" }}>
              <div style={{ padding: "12px 15px", }}>
                <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>标准APP运营概览</span>
              </div>
              <hr style={{ opacity: "0.4" }}></hr>
              <div style={{ display: 'flex', padding: "10px 20px 5px 20px" }}>
                <div style={{ width: '50%', fontSize: '14px', height: "26px", lineHeight: "26px" }}>APP覆盖率:<span style={{ color: 'orange', fontSize: "18px" }}> 88 </span>%</div>
                <div style={{ width: '50%', textAlign: "right", height: "26px", lineHeight: "26px" }}>
                  <Radio.Group defaultValue="a" size={'small'} >
                    <Radio.Button value="a" style={{ fontSize: "12px" }}>APP覆盖率</Radio.Button>
                    <Radio.Button value="b" style={{ fontSize: "12px" }}>APP运行率</Radio.Button>
                  </Radio.Group>
                </div>
              </div>
              <div ref={barRef5} style={{ height: "185px", width: "100%" }}></div>
            </div>
          </div>
          <div style={{ background: 'white', flex: '1 1 100px', margin: "0 0 0 15px", borderRadius: "8px" }}>
            <div style={{ padding: "12px 15px", }}>
              <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>管辖区域运营概览</span>
            </div>
            <hr style={{ opacity: "0.4" }}></hr>
            <div style={{ height: "26px", lineHeight: "26px", padding: "10px" }}>
              <Radio.Group defaultValue="a" size={'small'} >
                <Radio.Button value="a" style={{ fontSize: "12px" }}>物联体系建设应用率</Radio.Button>
                <Radio.Button value="b" style={{ fontSize: "12px" }}>设备在线情况</Radio.Button>
                <Radio.Button value="b" style={{ fontSize: "12px" }}>设备运营情况</Radio.Button>
              </Radio.Group>
              <div ref={mapRef} style={{ height: '450px', width: "100%", textAlign: 'center', margin: "15px 0 0 0" }}>

              </div>
              {/* <Image preview={false} src={map} style={{ width: "400px" }} /> */}
            </div>
          </div>
        </div>
        <div style={{ background: 'white', margin: '15px 0 0 0', borderRadius: "8px" }}>
          <div style={{ padding: "12px 15px", display: "flex" }}>
            <div style={{ width: "50%" }}>
              <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>告警统计</span>
            </div>

            <div style={{ float: "right", height: "26px", lineHeight: "26px", width: "50%", textAlign: "right" }}>
              <Radio.Group defaultValue="a" size={'small'} >
                <Radio.Button value="a" style={{ fontSize: "12px" }}>告警设备数</Radio.Button>
                <Radio.Button value="b" style={{ fontSize: "12px" }}>告警总次数</Radio.Button>
              </Radio.Group>
            </div>
          </div>

          <hr style={{ opacity: "0.4" }}></hr>
          <div style={{ height: "300px" }}></div>
        </div>
      </div>
      <div style={{ flex: "1 1 400px", margin: "0 0 0 15px" }}>
        <div style={{ height: "235px", background: "white", borderRadius: "8px" }}>
          <div style={{ padding: "12px 15px", display: "flex" }}>
            <div style={{ width: "50%" }}>
              <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>快捷入口</span>
            </div>
            <div style={{ float: "right", height: "21px", lineHeight: "21px", width: "50%", textAlign: "right" }}>
              <EditOutlined style={{ color: "#1FBBA9" }} />
            </div>
          </div>
          <hr style={{ opacity: "0.4" }}></hr>
          <Row justify="space-between" style={{ padding: '15px 15px' }}>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in1} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>指标看板</div>
              </div>
            </Col>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in2} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>设备档案</div>
              </div>
            </Col>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in3} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>设备监测</div>
              </div>
            </Col>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in4} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>物联卡档案</div>
              </div>
            </Col>
          </Row>
          <Row justify="space-between" style={{ padding: '10px 15px' }}>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in5} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>物联卡监测</div>
              </div>
            </Col>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in6} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>设备新建</div>
              </div>
            </Col>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in7} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>设备检修</div>
              </div>
            </Col>
            <Col span={4}>
              <div style={{ textAlign: 'center' }}>
                <Image preview={false} src={in8} style={{ width: "40px", height: '40px' }}></Image>
                <div style={{ fontSize: "12px", padding: "5px 0 0 0" }}>设备退运</div>
              </div>
            </Col>
          </Row>


        </div>
        <div style={{ background: "white", margin: "15px 0 0 0", borderRadius: "8px", height: "680px" }}>
          <div style={{ padding: "12px 15px", display: "flex" }}>
            <div style={{ width: "50%" }}>
              <span style={{ fontSize: "16px", fontWeight: 'bold', borderLeft: "3px solid #1FBBA9", padding: "0 0 0 10px" }}>代办提醒</span>
            </div>
            <div style={{ float: "right", height: "26px", lineHeight: "26px", width: "50%", textAlign: "right", fontSize: "12px" }}>
              <QuestionCircleFilled style={{ margin: '0 3px 0 0', color: "gray" }} /><span style={{ color: "#2e86de" }}>一键导出</span>
            </div>
          </div>
          <hr style={{ opacity: "0.4" }}></hr>
          <div style={{ padding: "15px" }}>
            <div style={{ display: "flex" }}>
              <div style={{ width: "50%", background: "linear-gradient(to right, #bad8fdde, #f0f7fc)", display: 'flex', padding: "10px", borderRadius: "3px" }}>
                <div style={{ flex: "1 1 200px", color: "#2e86de" }}>
                  <div style={{ fontSize: "12px" }}>待消缺的设备</div>
                  <div style={{ fontSize: "18px", fontWeight: 'bold' }}>19670</div>
                </div>
                <div style={{ width: "80px", textAlign: "right", lineHeight: '40px' }}><Image preview={false} src={info1}></Image></div>
              </div>
              <div style={{ width: "50%", background: "linear-gradient(to right, #bad8fdde, #f0f7fc)", display: 'flex', padding: "10px", borderRadius: "3px", margin: "0 0 0 10px" }}>
                <div style={{ flex: "1 1 200px", color: "#2e86de" }}>
                  <div style={{ fontSize: "12px" }}>待调试的设备</div>
                  <div style={{ fontSize: "18px", fontWeight: 'bold' }}>58</div>
                </div>
                <div style={{ width: "80px", textAlign: "right", lineHeight: '40px' }}><Image preview={false} src={info2}></Image></div>
              </div>
            </div>
            <div style={{ display: "flex", margin: "10px 0 0 0" }}>
              <div style={{ width: "50%", background: "linear-gradient(to right, #bad8fdde, #f0f7fc)", display: 'flex', padding: "10px", borderRadius: "3px" }}>
                <div style={{ flex: "1 1 200px", color: "#2e86de" }}>
                  <div style={{ fontSize: "12px" }}>待安装的设备</div>
                  <div style={{ fontSize: "18px", fontWeight: 'bold' }}>415</div>
                </div>
                <div style={{ width: "80px", textAlign: "right", lineHeight: '40px' }}><Image preview={false} src={info3}></Image></div>
              </div>
              <div style={{ width: "50%", background: "linear-gradient(to right, #bad8fdde, #f0f7fc)", display: 'flex', padding: "10px", borderRadius: "3px", margin: "0 0 0 10px" }}>
                <div style={{ flex: "1 1 200px", color: "#2e86de" }}>
                  <div style={{ fontSize: "12px" }}>待检修的设备</div>
                  <div style={{ fontSize: "18px", fontWeight: 'bold' }}>0</div>
                </div>
                <div style={{ width: "80px", textAlign: "right", lineHeight: '40px' }}><Image preview={false} src={info4}></Image></div>
              </div>
            </div>
            <div style={{ display: "flex", margin: "10px 0 0 0" }}>
              <div style={{ width: "50%", background: "linear-gradient(to right, #fde4d6, #fef3ec)", display: 'flex', padding: "10px", borderRadius: "3px" }}>
                <div style={{ flex: "1 1 200px", color: "#b86159" }}>
                  <div style={{ fontSize: "12px" }}>即将建设超期的设备</div>
                  <div style={{ fontSize: "18px", fontWeight: 'bold' }}>0</div>
                </div>
                <div style={{ width: "80px", textAlign: "right", lineHeight: '40px' }}><Image preview={false} src={info5}></Image></div>
              </div>
              <div style={{ width: "50%", background: "linear-gradient(to right, #fde4d6, #fef3ec)", display: 'flex', padding: "10px", borderRadius: "3px", margin: "0 0 0 10px" }}>
                <div style={{ flex: "1 1 200px", color: "#b86159" }}>
                  <div style={{ fontSize: "12px" }}>即将检修超期的设备</div>
                  <div style={{ fontSize: "18px", fontWeight: 'bold' }}>0</div>
                </div>
                <div style={{ width: "80px", textAlign: "right", lineHeight: '40px' }}><Image preview={false} src={info6} ></Image></div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', padding: "0 15px" }}>
            <Image src={info7} style={{ height: "40px" }}></Image>
            <div style={{ margin: "0 0 0 15px", flex: "1 1 200px" }}>
              <div style={{ fontSize: '13px', }}>【新建设备】张三成功新建127台设备</div>
              <div style={{ opacity: '0.7', fontSize: '12px', margin: "5px 0 0 0" }}>2023-01-01</div>
            </div>
          </div>
        </div>


      </div>
    </div>
  )
}
